<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>xlsx file</title>
        <link rel="stylesheet" type="text/css" href="./../style.css">
        <style>
            body {background: #fff;}
            table, table tr th, table tr td {
                border: 1px solid #ddd;
                padding: 0px 8px;
            }
            table {
                min-height: 25px;
                line-height: 25px;
                /* text-align: center; */
                border-collapse: collapse;
                font-size: 15px;
            }
            table tr {height: 25px;text-align: center;}
            table tr:not(:first-child) {text-align: left; color: #333;}
            table tr td {min-width: 20px;}
            table tr td:not(:first-child) {
                min-width: 80px;
                max-width: 120px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div id="output"></div>
            <div id="msgbox" class="hidden">
                <div id="title">出错了! (warning!)</div>
                <div id="message"></div>
                <!-- <div id="info"></div> -->
            </div>
        </div>
        <!-- <script src="./xlsx.full.min.js"></script> -->
        <script src="./xlsx.core.min.js"></script>
        <script src="./../utils.js"></script>
		<script>
            (function(){
                // 给表格增加序列栏
                var setTbHead = function(){
                    var table = document.getElementsByTagName('tbody');
                    // var tbody = table[0].tBodies;
                    var rows = table[0].rows;
                    for(var i=0;i<rows.length;i++){
                        var td = rows[i].insertCell(0);  // -1是加到最后
                        td.innerHTML = (i + 1);
                    }
                    var td = '';
                    for(var i=0;i<rows[0].cells.length;i++) {
                        var value = rows[0].cells[i].getAttribute('id') || '';
                        if(value) {
                            value = value.replace('sjs-', '');
                            value = value.substr(0, value.length-1);
                        }
                        td += '<td>'+value+'</td>';
                    }
                    var tr = table[0].insertRow(0);
                    tr.innerHTML = td;
                }
                // 解析文件
				page.getFileInfo(function(file){
                    try{
						var wb = XLSX.read(file.content, {type: 'buffer'});
                        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
                        //wb.Sheets[Sheet名]获取第一个Sheet的数据
                        // var json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                        var html = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);
                        // document.getElementById("output").innerHTML = JSON.stringify(json, null, "\t");
                        document.getElementById("output").innerHTML = html;
                        setTbHead();
					}catch(err){
						page.showTips('解析失败，请检查文件是否正常！');
					}
                });
			})();
        </script>
    </body>
</html>